<template>
    <div>
        <a-form :model="formState" name="horizontal_login" layout="inline" autocomplete="off">
            <a-form-item>
                <a-range-picker v-model:value="formState.time" :placeholder="['开始日期', '结束日期']" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit" :icon="h(SearchOutlined)" @click="getData">查询</a-button>
            </a-form-item>
        </a-form>
        <div style="margin-top: 30px;">
            <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#ECF4FF', color: '#333333' }"
        :row-class-name="tableRowClassName" style="width: 100%">
        <el-table-column prop="date" label="导出时间">
        </el-table-column>
        <el-table-column prop="name" label="搜索条件">
        </el-table-column>
        
        <el-table-column prop="address" label="导出条数">
        </el-table-column>
        <el-table-column prop="type" label="导出状态">
        </el-table-column>
        <el-table-column prop="link" label="下载链接">
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
        </div>
    </div>
</template>
<script  setup>
import { h } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";
const formState = ref({
  username: "",
  time: "",
});
const tableData = [{
  date: '2024-05-14 12:43:44',
  name: '关键词：人工智能。公告类型：公告；匹配模式：精准匹配；',
  address: '200',
  type:"正在导出",
  link:'正在生成下载链接',
}, {
    date: '2024-05-14 12:43:44',
  name: '关键词：人工智能。公告类型：公告；匹配模式：精准匹配；',
  address: '200',
  type:"导出完成",
  link:'https://www.6ocbx.com/search',
}, {
    date: '2024-05-14 12:43:44',
  name: '关键词：人工智能。公告类型：公告；匹配模式：精准匹配；',
  address: '200',
  type:"正在失败",
  link:'生成链接失败',
}, {
    date: '2024-05-14 12:43:44',
  name: '关键词：人工智能。公告类型：公告；匹配模式：精准匹配；',
  address: '200',
  type:"正在导出",
  link:'正在生成下载链接',
},]
const handleSizeChange =(val)=> {
        console.log(`每页 ${val} 条`)
      }
      const handleCurrentChange =(val)=> {
        console.log(`当前页: ${val}`)
      }
</script>
<style scoped>

:deep(.el-table__cell) {
  height: 44px;
}

/* 添加隔行变色的CSS */
:deep(.el-table .el-table__body tr.el-table__row:nth-child(even)) {
  background-color: #EDF0F6;
}

:deep(el-table .el-table__body tr.el-table__row:nth-child(odd)) {
  background-color: #ffffff;
}
.el-pagination{
  margin-top: 28px;
}
</style>
